<!-- 199010120 唐梓铭 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta title="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/public.css" />
    <script src="https://unpkg.com/vue@3.2.0"></script>
    <title>重庆红岩</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        border: 0;
      }
      ol,
      ul,
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      .clears {
        clear: both;
        height: 0;
        line-height: 0;
        overflow: hidden;
        font-size: 0;
      }

      #nav {
        width: 100%;
        height: 100px;
        border-bottom: 8px solid #ed1d24;
        background: url(./imgs/nav-bg.png) repeat-x left top;
      }
      #nav > ul > li > a {
        display: block;
        color: white;
        width: 113px;
        height: 70px;
        padding-top: 30px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        background: url(./imgs/nav-line.png) no-repeat right top;
      }
      #nav > ul > li {
        width: 113px;
        height: 100px;
        float: left;
        text-align: center;
        position: relative;
        margin: 0 auto;
      }
      /* hover前不能有空格 */
      #nav > ul > li > a:hover {
        background: url(./imgs/nav.png) no-repeat left top;
      }
      #nav > ul > li > a > ul {
        position: absolute;
        top: 100px;
        font-size: 14px;
        text-align: center;
        line-height: 32px;
      }
      #sub {
        width: 113px;
        text-align: center;
        position: relative;
        margin: 0 auto;
        background-color: #ed1d24;
      }
      #sub > a {
        font-size: 14px;
        font-weight: normal;
        color: #fff;
        width: auto;
        height: auto;
        display: block;
        padding: 0;
        float: none;
        line-height: 32px;
      }
    </style>
  </head>
  <body>
    <nav id="nav">
      <ul style="margin: 0 auto; width: 1200px">
        <li
          v-for="menu in menus"
          @mouseover="menu.show = ! menu.show"
          @mouseout="menu.show = !menu.show"
        >
          <a v-bind:href="menu.url">
            {{menu.title}}
            <span
              style="
                color: white;
                font-size: 12px;
                display: block;
                line-height: 16px;
                font-weight: normal;
              "
              >{{menu.baseName}}</span
            >
          </a>
          <ul v-show="menu.show">
            <li id="sub" v-for="submenu in menu.submenus">
              <a v-bind:href="submenu.url">{{submenu.title}} </a>
            </li>
          </ul>
        </li>
        <div class="clears"></div>
      </ul>
    </nav>
  </body>
  <script>
    // 199010120 唐梓铭
    const { createApp } = Vue;
    // 创建app
    const app = createApp({
      data() {
        return {
          menus: [
            {
              title: "首页",
              url: "#",
              show: false,
              baseName: "Home",
              submenus: [],
            },
            {
              title: "关于红岩",
              url: "#",
              show: false,
              baseName: "Hong yan",
              submenus: [
                { title: "红岩文化", url: "#" },
                { title: "博物馆机构", url: "#" },
                { title: "历史沿革", url: "#" },
              ],
            },
            {
              title: "公告动态",
              url: "#",
              show: false,
              baseName: "Dynamics",
              submenus: [
                { title: "文博信息", url: "#" },
                { title: "政务平台", url: "#" },
                { title: "公告", url: "#" },
                { title: "专题报道", url: "#" },
              ],
            },
            {
              title: "馆藏精品",
              url: "#",
              show: false,
              baseName: "Collections",
              submenus: [
                { title: "一级文物", url: "#" },
                { title: "二级文物", url: "#" },
                { title: "三级文物", url: "#" },
              ],
            },
            {
              title: "陈列展览",
              url: "#",
              show: false,
              baseName: "Exhibition",
              submenus: [
                { title: "虚拟展览", url: "#" },
                { title: "基本陈列", url: "#" },
                { title: "复原陈列", url: "#" },
                { title: "临时展览", url: "#" },
                { title: "展览交流", url: "#" },
              ],
            },
            {
              title: "研究开发",
              url: "#",
              show: false,
              baseName: "Research",
              submenus: [
                { title: "历史研究", url: "#" },
                { title: "艺术创作", url: "#" },
                { title: "影音在线", url: "#" },
                { title: "文创产品", url: "#" },
              ],
            },
            {
              title: "公共教育",
              url: "#",
              show: false,
              baseName: "Education",
              submenus: [
                { title: "党性教育", url: "#" },
                { title: "爱国主义教育", url: "#" },
                { title: "研学实践教育", url: "#" },
                { title: "公共教育", url: "#" },
              ],
            },
            {
              title: "参观服务",
              url: "#",
              show: false,
              baseName: "Service",
              submenus: [
                { title: "景点介绍", url: "#" },
                { title: "服务内容", url: "#" },
                { title: "网上预约", url: "#" },
                { title: "志愿服务", url: "#" },
              ],
            },
            {
              title: "网上预约",
              url: "#",
              show: false,
              baseName: "Reservation",
              submenus: [],
            },
          ],
        };
      },
    });
    // 挂载app
    app.mount("#nav");
  </script>
</html>
